<template>
  <div class="all">
    <nav class="home-nav">
      <div class="left">
        <span>{{ FormatTime(nowTime) }}</span>
        <span>{{ username.name }}，欢迎您登录系统</span>
      </div>
      <div class="right">
        <div class="item" v-for="it in items" :key="it.key">
          <i :class="it.icon"></i>
          <div>
            <span>{{ it.value }}</span>
            <span>{{ it.name }}</span>
          </div>
        </div>
      </div>
    </nav>
    <main class="home-main">
      <div class="left">
        <h4>统计分析</h4>
        <el-tabs v-model="activeName" @tab-click="handleClick" class="tabs">
          <el-tab-pane label="客户分布统计分析" name="first" id="chartNode1" style="height: 500px;width: 1000px;margin: 0 auto;"
          ></el-tab-pane
          >
          <el-tab-pane label="供应商统计分析" name="second" id="chartNode2" style="height: 500px;width: 1000px;margin: 0 auto;"
          ></el-tab-pane
          >
          <el-tab-pane label="款项统计分析" name="third" id="chartNode3" style="height: 500px;width: 1000px;margin:0 auto;"
          ></el-tab-pane
          >
        </el-tabs>
      </div>
      <div class="right">
        <h4>待办数据</h4>
        <p v-for="k in todosList" :key="k.index">
          <span>{{ k.title }}</span>
          <a href="#">详情</a>
        </p>
      </div>
    </main>
  </div>
</template>

<script>
import 'echarts-liquidfill'
import echarts from 'echarts'
import { supAPI, cusAPI, totalAPI, todosAPI } from '../../apis/homeApi'

export default {
  data () {
    return {
      timer: undefined,
      timer1: '',
      nowTime: new Date(),
      numList: [],
      itemList: [],
      todosList: [],
      activeName: 'first',
      username: this.$store.getters['common/userinfo'],
      firstData: [],//第一个图表数据
      secondData: [],//第二个图表数据
      thirdData: [],//第三个图表数据
      items: [
        {
          key: 'cooperateCount',
          icon: 'el-icon-s-custom',
          name: '合作企业',
          value: 0,
        },
        {
          key: 'productCount',
          icon: 'el-icon-s-shop',
          name: '在售产品',
          value: 0
        },
        {
          key: 'salesCount',
          icon: 'el-icon-s-order',
          name: '订单数量',
          value: 0
        },
        {
          key: 'cancelCount',
          icon: 'el-icon-s-release',
          name: '取消订单',
          value: 0
        },
      ],
    }
  },
  created () {
    this.gettodos()
    this.timer = setInterval(() => {
      this.nowTime = new Date().toLocaleString()

    })
  },
  async mounted () {
    //导航条数据.[

    let bls = await totalAPI()
    console.log(11111111111111, bls)
    this.numList = bls.data
    this.items[0].value = this.numList.cooperateCount
    this.items[1].value = this.numList.productCount
    this.items[2].value = this.numList.salesCount
    this.items[3].value = this.numList.cancelCount
    // 使用到虚拟dom节点，它是绘制echart的容器
    // 实例化方法 -- init方法需要一个dom节点
    // setTimeout不要给时间
    //第一个图
    //   let res = await cusAPI();
    //   let items = res.data;
    //   //console.log(items);
    //   if (res.code === 200) {
    //     this.firstData = res.data
    //   }
    //

    cusAPI().then(res => {
      if (res.code != 200) return this.$message.error('系统错误')
      this.firstData = res.data
      this.firstChart()
      this.secondChart()
      this.$nextTick(()=>{
        this.threeChart()
      })

    })
    supAPI().then(res => {
      if (res.code != 200) return this.$message.error('系统错误')
      this.secondData = res.data
      this.thirdData = res.data
    })

  },
  methods: {
    FormatTime () {
      //返回显示的日期时间格式
      var date = new Date()
      var month = this.formatTime(date.getMonth() + 1)
      var day = this.formatTime(date.getDate())
      var hour = this.formatTime(date.getHours())
      var weekday = date.getDay()
      var weeks = new Array(
        '星期日',
        '星期一',
        '星期二',
        '星期三',
        '星期四',
        '星期五',
        '星期六'
      )
      var week = weeks[weekday]
      return `${month}-${day} ${week} ${hour}时 `
    },
    formatTime (n) {
      //判断是否需要加0
      if (n < 10) {
        return '0' + n
      } else {
        return n
      }
    },
    gettodos () {
      todosAPI().then((res) => {
        this.todosList = res.data
        //console.log(this.todosList)
      })
    },
    handleClick (tab, event) {
      console.log(tab, event)
    },

    firstChart () {
      let chartDom = document.getElementById('chartNode1')
      let myChart = echarts.init(chartDom)
      let category = this.firstData.map(it => it.city).slice(0, 20)
      let dottedBase = []
      let lineData = this.firstData.map(it => it.salesAmount)
      let barData = this.firstData.map(it => it.cancelAmount)
      let rateData = this.firstData.map(it => it.quality)
      let option = {
        backgroundColor: '#fff',
        tooltip: {
          trigger: 'axis',
          backgroundColor: '#999',
          axisPointer: {
            label: {
              show: true,
              backgroundColor: '#7B7DDC'
            }
          }
        },
        legend: {
          data: ['订单数', '取消订单数', '客户质量',],
          textStyle: {
            color: '#B4B4B4'
          },
          top: '7%',
        },
        grid: {
          x: '12%',
          width: '82%',
          y: '12%',
        },
        xAxis: {
          data: category,
          axisLine: {
            lineStyle: {
              color: '#B4B4B4'
            }
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            show: true,
            interval: 0,
            rotate: 20,
            textStyle: {
              color: '#999',
              fontSize: 10
            }
          }
        },
        yAxis: [{
          name: '订单数',
          splitLine: { show: false },
          axisLine: {
            lineStyle: {
              color: '#B4B4B4',
            }
          },

          axisLabel: {
            formatter: '{value}',
          }
        },
          {
            name: '客户质量100分',
            splitLine: { show: false },
            axisLine: {
              lineStyle: {
                color: '#B4B4B4',
              }
            },
            axisLabel: {
              formatter: '{value}',
            }
          }],

        series: [{
          name: '客户质量',
          type: 'line',
          smooth: true,
          showAllSymbol: true,
          symbol: 'emptyCircle',
          symbolSize: 8,
          yAxisIndex: 1,
          itemStyle: {
            normal: {
              color: '#F02FC2'
            },
          },
          data: rateData
        },

          {
            name: '取消订单数',
            type: 'bar',
            barWidth: 10,
            itemStyle: {
              normal: {
                barBorderRadius: 5,
                color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    {
                      offset: 0,
                      color: '#956FD4'
                    },
                    {
                      offset: 1,
                      color: '#3EACE5'
                    }
                  ]
                )
              }
            },
            data: barData
          },

          {
            name: '订单数',
            type: 'bar',
            barGap: '-100%',
            barWidth: 10,
            itemStyle: {
              normal: {
                barBorderRadius: 5,
                color: new echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [
                    {
                      offset: 0,
                      color: 'rgba(156,107,211,0.5)'
                    },
                    {
                      offset: 0.2,
                      color: 'rgba(156,107,211,0.3)'
                    },
                    {
                      offset: 1,
                      color: 'rgba(156,107,211,0)'
                    }
                  ]
                )
              }
            },
            z: -12,
            data: lineData
          },
        ]
      }
      option && myChart.setOption(option)
    },
    secondChart () {
      let chartDom2 = document.getElementById('chartNode2')
      let myChart2 = echarts.init(chartDom2)
      var option = {
        tooltip: {
          trigger: 'item',
          axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'line' // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        grid: {
          left: '2%',
          right: '4%',
          bottom: '14%',
          top: '16%',
          containLabel: true
        },
        legend: {
          data: ['已付', '未付', '差异', '客户质量'],
          top: '5%',
          textStyle: {
            color: '#666666'
          },
          itemWidth: 15,
          itemHeight: 10,
          itemGap: 25
        },
        xAxis: {
          type: 'category',
          data: this.secondData.map(it => it.customerName).slice(0, 20),
          axisLine: {
            lineStyle: {
              color: '#999'
            }
          },
          axisLabel: {
            textStyle: {
              color: '#666666'
            }
          },
        },

        yAxis: [{
          name: '订单数',
          type: 'value',
          nameTextStyle: {
            color: '#666666'
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#999'
            }
          },
          splitLine: {
            show: false,
          },
          axisLabel: {
            textStyle: {
              color: '#999'
            }
          }
        },
          {
            type: 'value',
            name: '客户质量100分',
            nameTextStyle: {
              color: '#666666'
            },
            position: 'right',
            axisLine: {
              lineStyle: {
                color: '#999'
              }
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              interval: 0,
              show: true,
              formatter: '{value} ', //右侧Y轴文字显示
              textStyle: {
                color: '#999'
              }
            }
          }
        ],
        series: [{
          name: '已付',
          type: 'bar',
          barWidth: '12px',
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#29acff'
              }, {
                offset: 1,
                color: '#4bdfff'
              }]),
              barBorderRadius: 6,
            },
          },
          data: this.secondData.map(it => it.paid)
        },
          {
            name: '未付',
            type: 'bar',
            stack: 'x',
            barWidth: '12px',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#3d93f2'
                }, {
                  offset: 1,
                  color: '#5dc1fd'
                }]),
                barBorderRadius: 6,
              }

            },
            data: this.secondData.map(it => it.unpaid)
          },
          {
            name: '差异',
            type: 'bar',
            stack: 'x',
            barWidth: '12px',
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#01c871'
                }, {
                  offset: 1,
                  color: '#55f49c'
                }]),
                barBorderRadius: 6,
              }
            },
            data: this.secondData.map(it => it.differences)
          }, {
            name: '客户质量',
            type: 'line',
            yAxisIndex: 1, //使用的 y 轴的 index，在单个图表实例中存在多个 y轴的时候有用
            smooth: false, //平滑曲线显示

            symbol: 'circle', //标记的图形为实心圆
            symbolSize: 8, //标记的大小
            itemStyle: {
              normal: {
                color: '#ffa43a',
                borderColor: 'rgba(255, 234, 0, 0.5)', //圆点透明 边框
                borderWidth: 5
              },

            },
            lineStyle: {
              color: '#ffa43a'
            },

            data: this.secondData.map(it => it.quality)
          }
        ]
      }
      option && myChart2.setOption(option)
    },
    threeChart () {
      let chartDom3 = document.getElementById('chartNode3')
      let myChart3 = echarts.init(chartDom3)
      let temp = this.thirdData[0]
      console.log(temp, typeof (temp.paid))

      var value = (temp.paid / (temp.paid + temp.unpaid)).toFixed(2)
      var value1 = (temp.quality / temp.differences).toFixed(2)
      var option = {
        backgroundColor: '#fff',
        title: [
          {
            text: '付款比率',
            x: '19%',
            y: '70%',
            textStyle: {
              fontSize: 30,
              fontWeight: '100',
              color: '#5dc3ea',
              lineHeight: 16,
              textAlign: 'center',
            },
          },
          {
            text: '收款比率',
            x: '69%',
            y: '70%',
            textStyle: {
              fontSize: 30,
              fontWeight: '100',
              color: '#5dc3ea',
              lineHeight: 16,
              textAlign: 'center',
            },
          },
        ],
        series: [
          {
            type: 'liquidFill',
            radius: '47%',
            center: ['25%', '45%'],
            color: [
              {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#446bf5',
                  },
                  {
                    offset: 1,
                    color: '#2ca3e2',
                  },
                ],
                globalCoord: false,
              },
            ],
            data: [value, value], // data个数代表波浪数
            backgroundStyle: {
              borderWidth: 1,
              color: '#fff',
            },
            label: {
              normal: {
                textStyle: {
                  fontSize: 50,
                  color: 'skyblue',
                },
              },
            },
            outline: {
              // show: false
              borderDistance: 0,
              itemStyle: {
                borderWidth: 2,
                borderColor: '#999',
              },
            },
          },

          { //第二个球的填充
            type: 'liquidFill',
            radius: '47%',
            center: ['75%', '45%'],
            color: [
              {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: '#2aa1e3',
                  },
                  {
                    offset: 1,
                    color: '#08bbc9',
                  },
                ],
                globalCoord: false,
              },
            ],
            data: [value1, value1], // data个数代表波浪数
            backgroundStyle: {
              borderWidth: 1,
              color: '#fff',
            },
            label: {
              normal: {
                textStyle: {
                  fontSize: 50,
                  color: 'skyblue',
                },
              },
            },
            outline: {
              // show: false
              borderDistance: 0,
              itemStyle: {
                borderWidth: 2,
                borderColor: '#999',
              },
            },
          },
        ],
      }
      option && myChart3.setOption(option)
      let i = 1
      this.timer1 = setInterval(() => {
        //计算
        temp = this.thirdData[i]
        value = (temp.paid / (temp.paid + temp.unpaid)).toFixed(2)
        value1 = (temp.unpaid / (temp.paid + temp.unpaid)).toFixed(2)
        option = {
          backgroundColor: '#fff',
          title: [
            {
              text: '付款比率',
              x: '19%',
              y: '70%',
              textStyle: {
                fontSize: 30,
                fontWeight: '100',
                color: '#5dc3ea',
                lineHeight: 16,
                textAlign: 'center',
              },
            },
            {
              text: '收款比率',
              x: '69%',
              y: '70%',
              textStyle: {
                fontSize: 30,
                fontWeight: '100',
                color: '#5dc3ea',
                lineHeight: 16,
                textAlign: 'center',
              },
            },
          ],
          series: [
            {
              type: 'liquidFill',
              radius: '47%',
              center: ['25%', '45%'],
              color: [
                {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#446bf5',
                    },
                    {
                      offset: 1,
                      color: '#2ca3e2',
                    },
                  ],
                  globalCoord: false,
                },
              ],
              data: [value, value], // data个数代表波浪数
              backgroundStyle: {
                borderWidth: 1,
                color: '#fff',
              },
              label: {
                normal: {
                  textStyle: {
                    fontSize: 50,
                    color: 'skyblue',
                  },
                },
              },
              outline: {
                // show: false
                borderDistance: 0,
                itemStyle: {
                  borderWidth: 2,
                  borderColor: '#999',
                },
              },
            },

            { //第二个球的填充
              type: 'liquidFill',
              radius: '47%',
              center: ['75%', '45%'],
              color: [
                {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: '#2aa1e3',
                    },
                    {
                      offset: 1,
                      color: '#08bbc9',
                    },
                  ],
                  globalCoord: false,
                },
              ],
              data: [value1, value1], // data个数代表波浪数
              backgroundStyle: {
                borderWidth: 1,
                color: '#fff',
              },
              label: {
                normal: {
                  textStyle: {
                    fontSize: 50,
                    color: 'skyblue',
                  },
                },
              },
              outline: {
                // show: false
                borderDistance: 0,
                itemStyle: {
                  borderWidth: 2,
                  borderColor: '#999',
                },
              },
            },
          ],
        }
        console.log(option)
        option && myChart3.setOption(option)
        i++
      }, 5000)
    },
  },
  //组件销毁  清除定时器（做定时刷新时一定要有）
  beforeDestroy () {
    if (this.timer) {
      clearInterval(this.timer)
    }
      clearInterval(this.timer1)
  },
}
</script>
<style lang="less" scoped>
@import "../../style/common.less";

.all {
  background-color: rgb(243, 241, 241);
  width: 100%;
  height: 100%;
}

.home-nav {
  display: flex;
  justify-content: space-between;
  align-content: center;

  > .left {
    flex: 0 0 240px;
    width: 0;
    margin-left: 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    height: 74px;

    span {
      display: block;
      font-size: 20px;
      color: @c1;
      font-weight: 600;

      &:last-child {
        color: rgb(98, 96, 96);
        font-weight: 400;
        font-size: 14px;
      }
    }
  }

  > .right {
    text-align: right;
    width: 680px;
    height: 74px;
    display: flex;
    align-items: center;

    > .item {
      display: flex;
      justify-content: center;
      text-align: center;
      border-left: solid 1px #999;
      height: 44px;
      width: 173px;

      &:nth-child(1) {
        border-left: none;

      }

      > i {
        float: left;
        width: 44px;
        height: 44px;
        text-align: center;
        line-height: 44px;
        border-radius: 50%;
        background-color: @c1;
        font-size: 20px;
        color: #fff;
      }

      > div {
        float: left;

        > span {
          margin-left: 8px;
          display: block;
          font-size: 20px;
          color: @c1;
          font-weight: 600;

          &:last-child {
            color: #999;
            font-weight: 400;
            font-size: 14px;
          }
        }
      }
    }
  }
}

.home-main {
  display: flex;
  height: 610px;
  margin-top: 12px;

  h4 {
    margin-left: 15px;
  }

  > .left {
    flex: 1;
    width: 100%;
    height: 650px;
    margin-right: 20px;
    margin-left: 20px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 20px 20px 60px #d8d7d7,
      -10px -10px 20px #ffffff;

    > .tabs {
      margin-left: 15px;
      margin-right: 15px;
    }
  }

  > .right {
    flex: 0 0 360px;
    width: 100%;
    height: 650px;
    margin-right: 20px;
    border-radius: 10px;
    background: #fff;
    box-shadow: 20px 20px 60px #d8d7d7,
      -10px -10px 20px #ffffff;

    > p {
      margin-left: 20px;
      font-size: .85rem;
      width: 360px;

      > a {
        display: block;
        float: right;
        margin-right: 30px;
        color: rgb(74, 148, 240);
        text-decoration: none;
      }
    }

  }
}
</style>

